@import '../../styles/vars.scss';

.x-card {
  border-radius: 6px;
  padding: 0;

  .x-card-title {
    margin: 0;
    padding: 0.5rem 1rem;
    font-size: 1.2rem;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
  }

  .x-card-body {
    padding: 1rem;
  }

  .x-card-item {
    border-top: 1px solid red;

    &:first-child {
      border-top: 0px !important;
    }
  }
}

.x-card-default {
  border: 1px solid $color-default-6;

  .x-card-title {
    background-color: $color-default;
    color: $color-font-dark;
  }
  .x-card-item {
    border-top: 1px solid $color-default-6;
  }
}

.x-card-primary {
  border: 1px solid $color-primary-6;

  .x-card-title {
    background-color: $color-primary;
    color: $color-font-light;
  }
  .x-card-item {
    border-top: 1px solid $color-primary-6;
  }
}

.x-card-info {
  border: 1px solid $color-info-6;

  .x-card-title {
    background-color: $color-info;
    color: $color-font-light;
  }
  .x-card-item {
    border-top: 1px solid $color-info-6;
  }
}

.x-card-success {
  border: 1px solid $color-success-6;

  .x-card-title {
    background-color: $color-success;
    color: $color-font-light;
  }
  .x-card-item {
    border-top: 1px solid $color-success-6;
  }
}

.x-card-danger {
  border: 1px solid $color-danger-6;

  .x-card-title {
    background-color: $color-danger;
    color: $color-font-light;
  }
  .x-card-item {
    border-top: 1px solid $color-danger-6;
  }
}

.x-card-warning {
  border: 1px solid $color-warning-6;

  .x-card-title {
    background-color: $color-warning;
    color: $color-font-light;
  }
  .x-card-item {
    border-top: 1px solid $color-warning-6;
  }
}

.x-card-bili {
  border: 1px solid $color-bili-6;

  .x-card-title {
    background-color: $color-bili;
    color: $color-font-light;
  }
  .x-card-item {
    border-top: 1px solid $color-bili-6;
  }
}
